<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="房屋详情" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body">
			<view class="u-rela">
				<u-swiper radius="0" height="180" imgMode="aspectFill" style="margin-bottom: 20rpx;" @click="intoBanner" indicator indicatorMode="dot" indicator-pos="bottomRight" :list="detail.images_" keyName="image">
				</u-swiper>
				<image class="u-abso" v-if="detail.is_anxuan==1" style="width:100%;bottom:-60rpx;" mode="widthFix" src="https://resourse.cnlhjt.com/upload/20221230/a45e79481c6c665c489bc6f4f3c9b506.png"></image>
			</view>
			<!-- 占位 -->
			<view v-if="detail.is_anxuan==1" style="height:60rpx;"></view>  
			
			<view style="padding:20rpx;border-bottom:2rpx solid #eee;">
				<view class="title_con">{{detail.rent_type_label}} | {{detail.title}}</view>
				<view class="p_con">
					<text class="p">{{detail.price}}</text>
					<text style="margin:0 5rpx;">元/月</text>
					<text class="p_label">{{detail.amount_type_label}}</text>
				</view>
				<view style="padding:15rpx 20rpx;background-color: #f1ede2;color:#bea180;margin:15rpx 0;font-size: 24rpx;" @click="topromise">
					<image class="va_m" style="width:25rpx;margin-right:15rpx;" mode="widthFix" src="https://resourse.cnlhjt.com/upload/20230103/1c7a9f75f8023027f02809fb4d08acda.png"></image>
					<text class="va_m">真房源 合规承诺 有问题随时举报</text>
					<view class="dis_inl_blo" style="float:right">
						<u-icon size="18" name="arrow-right" color="#bea180">
						</u-icon>
					</view>
				</view>
				<view style="display: flex;text-align: center;justify-content: space-around;">
					<view class="little_type">
						<text class="dis_blo">{{detail.house_type_label}}</text>
						<text>户型</text>
					</view>
					<view class="little_type">
						<text class="dis_blo">{{detail.area}}㎡</text>
						<text>面积</text>
					</view>
					<view class="little_type">
						<text class="dis_blo">{{detail.floor_type_label}}</text>
						<text>楼层</text>
					</view>
					<view class="little_type">
						<text class="dis_blo">{{detail.arrow_type_label}}</text>
						<text>朝向</text>
					</view>
				</view>
				
			</view>
			<view style="padding:20rpx 40rpx;" class="label_con">
				<text v-for="(item,index) in detail.span_label" :key="index">{{item}}</text>
			</view>
			<view style="padding:20rpx;" class="intro_con label_con">
				<view class="label_title">房屋介绍</view>
				<rich-text :nodes="detail.content"></rich-text>
				<view>
					<view class="dis_inl_blo" style="width:25%;text-align: left;line-height: 65rpx;" v-for="(item,index) in detail.equipment_type_label" :key="index">
						<view class="dis_inl_blo va_m" style="margin-right:10rpx;font-size: 26rpx;color:#333;">
							<u-icon size="18" name="checkmark-circle" color="#666">
							</u-icon>
							<!-- <u-icon v-else size="20" name="close-circle" color="#ccc">
							</u-icon> -->
						</view>
						<text class="va_m" style="display: inline-block;font-size: 26rpx;color:#333;">{{item}}</text>
					</view>
				</view>
				
			</view>
			<view style="padding:20rpx;" class="intro_con label_con">
				<view class="label_title" style="margin-bottom:10rpx;">详细地址</view>
				<map style="width:100%;height:300rpx;" scale="14" :latitude="detail.location_[0]" :longitude="detail.location_[1]" :markers="markers"></map>
				<view style="line-height: 60rpx;font-size: 28rpx;margin-top:15rpx;">{{detail.address}}</view>
			</view>
			<view style="padding:20rpx;" class="intro_con label_con" v-if="detail.is_anxuan==1">
				<view class="label_title" style="margin-bottom:10rpx;">联系人</view>
				<view class="contact_con">
					<view class="con_list u-rela" style="margin-bottom:20rpx;">
						<image :src="detail.kefu.avatar" class="con_img"></image>
						<view class="center_con">
							<view>
								<text class="center_title" style="">{{detail.kefu.username}}</text>
								<!-- <text class="center_type" v-if="item.type==0">{{item.type_value}}</text> -->
								<text class="center_type" style="background-color: #148c93;">客服</text>
							</view>
							<view class="tel_con">龙海智慧物业服务中心</view>
							<view class="conment_con">
								<text>服务评价</text>
								<view class="dis_inl_blo" style="margin-left:5rpx;">
									<image v-for="(ite,inde) in 5" :key="inde" src="https://resourse.cnlhjt.com/upload/20221221/45e84d9a2b19334b0d1d036e36fe827b.png" style="height:22rpx;margin-left:10rpx;" mode="heightFix"></image>
									<!-- <u-rate :current="5" v-model="comment" size="16" :disabled="true"></u-rate> -->
								</view>
							</view>
						</view>
						<view class="u-abso" style="display: inline-block;top:55rpx;right:10rpx;">
							<view class="dis_inl_blo" style="margin-right:20rpx;">
								<button open-type="contact" style="border:none;padding:0;background-color: transparent;border-radius: 50%;">
									<u-icon name="https://resourse.cnlhjt.com/upload/20221230/e585e241a83e2c068dbf3a6574b93517.png" size="32" color="#2e8b57" @click="call(detail.kefu.phone)"></u-icon>
								</button>
							</view>
							<view class="dis_inl_blo">
								<u-icon name="https://resourse.cnlhjt.com/upload/20221230/b123b80749234566eba10d6a5e22ccd1.png" size="32" color="#2e8b57" @click="call(detail.kefu.phone)"></u-icon>
							</view>
							
						</view>
						
					</view>
				</view>
			</view>
			<view style="padding:20rpx;" class="intro_con label_con">
				<view class="label_title" style="margin-bottom:10rpx;">看房评价
					<text style="font-size: 26rpx;color:#999;float:right;" @click="tomoremoment(detail.id)">查看更多></text>
				</view>
				<view>
					<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
					</u-empty>
					<view v-for="(item,index) in commentList" :key="index" v-if="index<2" style="border-bottom:1rpx solid #f8f8f8;padding-top:20rpx;">
						<view>
							<image :src="item.avatar" style="width:70rpx;border-radius: 50%;" mode="widthFix"></image>
							<view class="dis_inl_blo">
								<text style="margin-left:25rpx;font-size: 26rpx;color:#333;">{{item.username}}</text>
								<view style="margin-left:15rpx;">
									<image v-for="(ite,inde) in item.star" :key="inde" src="https://resourse.cnlhjt.com/upload/20221221/45e84d9a2b19334b0d1d036e36fe827b.png" style="height:22rpx;margin-left:10rpx;" mode="heightFix"></image>
									<!-- <u-rate :current="5" v-model="comment" size="16" :disabled="true"></u-rate> -->
								</view>
							</view>
						</view>
						<view style="font-size: 26rpx;color:#333;margin:10rpx 0;">
							{{item.content}}
						</view>
						<view style="margin:20rpx 0;">
							<image style="width:160rpx;height:160rpx;border-radius: 15rpx;margin-right:10rpx;" mode="aspectFill" v-for="(ite,inde) in item.images" :key="inde" :src="ite"></image>
						</view>
					</view>
					
					<view style="height:60rpx;line-height: 60rpx;background-color: #f8f8f8;color:#aaa;padding:0 20rpx;margin:20rpx 0;border-radius: 30rpx;font-size: 26rpx;" @click="tomoment(detail.id)">发表评论.../</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBanner
	} from "@/service/configService.js";
	import {
		getRentDetail,getRentComment
	} from "@/service/rentService.js";
	export default {
		data () {
			return {
				id:0,
				detail:{
					
				},
				commentList:[],
				showEmpty:false,
				markers:[{
					id: 1,
					title: '位置', // String
					latitude: 0,
					longitude: 0,
					label: {
						content:'地址' ,
						color: '#000000',
						fontSize: 12,
						borderwidth: 12,
						borderColor:'#007AFF',
						borderRadius: 5,
						padding: 5,
						textAlign: 'center',
						bgColor:'#fff',
					},
					width:20,
					height:30,
					iconPath: 'https://resourse.cnlhjt.com/upload/20220830/d0bd94e4da44bf9d8fc78b21f43d1e57.png'
				
				}]
			}
		},
		onLoad(options) {
			this.id=options.id;
			getRentDetail({
				id:options.id
			}).then(this.getRentDetail);
			getRentComment({
				gid:options.id
			}).then(this.getRentComment)
		},
		watch:{
			//监听reFresh,如果有修改就执行监听器
			reFresh: function() {
				this.commentList=[];
				//调接口刷新数据
				getRentComment({
					gid:this.id
				}).then(this.getRentComment)
			}
		},
		methods:{
			getRentDetail(e) {
				if (e.code == 200) {
					this.detail = e.result;
					this.markers[0].latitude=e.result.location_[0];
					this.markers[0].longitude=e.result.location_[1];
					this.markers[0].title=e.result.address;
					this.markers[0].label.content=e.result.address;
				}
			},
			getRentComment(e){
				if(e.code==200){
					this.showEmpty=false;
					this.commentList=e.result.data
				}else{
					this.showEmpty=true;
					this.commentList=[]
				}
			},
			call(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			topriceDetail(){
				this.$u.route({
					url: '/pagesHome/houseRent/priceDetail',
					params: {
				
					}
				});
			},
			tomoremoment(id){
				this.$u.route({
					url: '/pagesHome/houseRent/commentList',
					params: {
						id:id
					}
				});
			},
			tomoment(id){
				this.$u.route({
					url: '/pagesHome/houseRent/comment',
					params: {
						id:id
					}
				});
			},
			topromise(){
				this.$u.route({
					url: '/pagesHome/houseRent/promise',
					params: {
				
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.title_con{
		font-size: 34rpx;
		line-height: 60rpx;
	}
	.p_con{
		font-size: 28rpx;
		color:red;
		margin:20rpx 0;
		.p{
			font-size: 40rpx;
			font-weight: bold;
		}
		.p_label{
			color:#999;
			margin-left:10rpx;
		}
	}
	.little_type{
		font-size: 30rpx;
		text:last-child{
			font-size: 22rpx;
			color:#999;
			margin-top:10rpx;
		}
	}
	.label_con{
		border-bottom:20rpx solid #f8f8f8;
	}
	.label_con>text{
		display: inline-block;
		color:#00828a;
		background-color: #e5f2f3;
		border: 1rpx solid #c8eaed;
		border-radius: 8rpx;
		margin:10rpx;
		font-size: 24rpx;
		padding:3rpx 15rpx;
	}
	.intro_con .label_title{
		font-size: 32rpx;
		height:60rpx;
		line-height: 60rpx;
	}
	.expenses_con{
		width:20%;
		font-size: 28rpx;
		text:first-child{
			color:#777;
		}
		text:nth-child(2){
			font-size: 22rpx;
			color:#aaa;
			margin:10rpx 0;
		}
	}
	.contact_con{
		// padding-top:20rpx;
		width:100%;
		// margin:0 3%;
		.con_list{
			// background-color: #fff;
			margin-top:20rpx;
			// padding:20rpx;
			width:100%;
			border-radius: 10rpx;
			// background-color: #e5f2f3;
			
			.con_img{
				width:120rpx;
				height:120rpx;
				margin-right:30rpx;
				border-radius: 60rpx;
				vertical-align: middle;
			}
			.center_con{
				display: inline-block;
				vertical-align: middle;
				.center_title{
					font-size: 33rpx; 
					font-weight: 800; 
					color: #333;
				}
				.center_type{
					font-size: 22rpx; 
					background-color: #fc0;
					color: aliceblue; 
					padding: 5rpx 10rpx; 
					margin-left: 10rpx; 
					border-top-left-radius: 15rpx;
					border-bottom-right-radius: 15rpx;
				}
				.tel_con{
					font-size: 24rpx;
					color:#666;
					margin-top:10rpx;
				}
				.conment_con{
					display: inline-block;
					padding:5rpx 0;
					font-size: 22rpx;
					// background-color: #fff;
					// border-radius: 20rpx;
					margin-top:20rpx;
					color:#666;
				}
			}
		}
		
	}
</style>